<template>
  <div class="commentItem">
    <div class="main">
      <div class="left">
        <van-image
          :src="comment.aut_photo"
          round
          width="32"
          height="32"
          fit="cover"
          lazy-load
        >
          <!-- 加载中loading -->
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
          <!-- 加载失败tip -->
          <template v-slot:error>
            <img src="@/assets/logo.png" alt="" />
          </template>
        </van-image>
      </div>
      <!-- 评论内容和星星 -->
      <div class="right">
        <div class="header">
          <div class="user">
            {{ comment.aut_name }}
          </div>
          <div v-if="isNotSub" class="reply" @click="reply($event, comment)">
            <i class="iconfont icon-pinglun1"></i>
            {{ comment.reply_count }}
          </div>
          <div
            class="star"
            :class="{ active: comment.is_liking }"
            @click="starComment($event, comment)"
          >
            <i class="iconfont icon-zan"></i>
            {{ comment.like_count }}
          </div>
        </div>
        <div class="body">
          <p>{{ comment.content }}</p>
          <span>{{ comment.pubdate | format }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommentItem',
  props: ['comment', 'isNotSub'],
  data () {
    return {}
  },
  methods: {
    // 回复评论
    reply ($event, comment) {
      this.$emit('reply', comment)
    },
    // 评论点赞
    starComment ($event, comment) {
      this.$emit('starComment', comment)
    }
  }
}
</script>

<style lang="less" scoped>
.commentItem {
  padding-bottom: 12px;
  .main {
    display: flex;
    .left {
    }
    .right {
      flex: 1;
      padding-left: 5px;
      .header {
        display: flex;
        .user {
          line-height: 20px;
          font-size: 15px;
          color: #555666;
          margin-right: auto;
        }
        .reply {
          margin-right: 10px;
        }
        .star {
          &.active {
            color: #e75349;
            i {
              color: #e75349;
            }
          }
        }
        .star,
        .reply {
          display: flex;
          align-items: center;
          font-size: 12px;
          color: #6b6b6b;
          i {
            color: #b9b9b9;
          }
        }
      }
      .body {
        display: flex;
        flex-wrap: wrap;
        font-size: 15px;
        color: #222226;
        word-break: break-all;
        span {
          margin-left: 8px;
          font-size: 12px;
          color: #999aaa;
          font-weight: 400 !important;
          line-height: 18px;
        }
      }
    }
  }
}
</style>
